<%@ page contentType="text/html; charset=utf-8" %>
<%@ include file="/WEB-INF/jsp/com/include/declare.jspf" %>
<%@ include file="/WEB-INF/jsp/com/include/doctype.jspf" %>

<script type="text/javascript">

function postInfoPopUp(obj) {

    
    $.ajax({
       type:'POST',
       url:'/mbr/zipCodePopUp.do' ,
       data:'',
       dataType:'html',
       cache:false,
       error:function(){
          alert("화면을 가져오지 못하였습니다."); 
       },
       success:function ( html, status ){
           
           $('#postInfoPopUp').html(html);
           insertPostInfoPopup(obj);
       }
    });

}

function insertPostInfoPopup(id){

    var html = document.getElementById("postInfoPopUp").innerHTML;
    document.getElementById("postInfoPopUp").innerHTML = "";
            
    var postNoInfoPopup;
    postNoInfoPopup = new jQuery.Popup({
    // 여러개 띠울때 사용한다. id값 변경으로 여러개의 popup을 띠울수 있다. 기본은 popup
    popupId : id,
    //팝업에 들어갈 title을 지정한다.
    popupTitle : "본인/휴대폰인증",
    // 팝업의 넓이를 지정한다. 기본은 500px
    width: 750,
    
    // 팝업의 움직일지 여부를 지정한다.
    popupMove: true,
    // 팝업 뒤쪽 배경 클릭 가능 여부를 지정한다.
    popupBackground : false,
    // 팝업에 중간에 들어갈 html
    popupHtml : html
        });

    postNoInfoPopup.openPopup(html);
    
}


function vinNoInfoPopUp(obj) {

    
    $.ajax({
       type:'POST',
       url:'/mbr/mbrVinNoInfoPopUp.do' ,
       data:'',
       dataType:'html',
       cache:false,
       error:function(){
          alert("화면을 가져오지 못하였습니다."); 
       },
       success:function ( html, status ){
           
           $('#vinNoInfoPopUp').html(html);
           insertVinNoInfoPopup(obj);
       }
    });

}

function insertVinNoInfoPopup(id){

    var html = document.getElementById("vinNoInfoPopUp").innerHTML;
    document.getElementById("vinNoInfoPopUp").innerHTML = "";
            
    var vinNoInfoPopup;
    vinNoInfoPopup = new jQuery.Popup({
    // 여러개 띠울때 사용한다. id값 변경으로 여러개의 popup을 띠울수 있다. 기본은 popup
    popupId : id,
    //팝업에 들어갈 title을 지정한다.
    popupTitle : "본인/휴대폰인증",
    // 팝업의 넓이를 지정한다. 기본은 500px
    width: 750,
    
    // 팝업의 움직일지 여부를 지정한다.
    popupMove: true,
    // 팝업 뒤쪽 배경 클릭 가능 여부를 지정한다.
    popupBackground : false,
    // 팝업에 중간에 들어갈 html
    popupHtml : html
        });

    vinNoInfoPopup.openPopup(html);
    
}



function cnttNoInfoPopUp(obj) {

    
    $.ajax({
       type:'POST',
       url:'/mbr/mbrCnttNoInfoPopUp.do' ,
       data:'',
       dataType:'html',
       cache:false,
       error:function(){
          alert("화면을 가져오지 못하였습니다."); 
       },
       success:function ( html, status ){
           
           $('#cnttNoInfoPopUp').html(html);
           insertCnttNoInfoPopup(obj);
       }
    });

}

function insertCnttNoInfoPopup(id){

    var html = document.getElementById("cnttNoInfoPopUp").innerHTML;
    document.getElementById("cnttNoInfoPopUp").innerHTML = "";
            
    var cnttNoInfoPopup;
    cnttNoInfoPopup = new jQuery.Popup({
    // 여러개 띠울때 사용한다. id값 변경으로 여러개의 popup을 띠울수 있다. 기본은 popup
    popupId : id,
    //팝업에 들어갈 title을 지정한다.
    popupTitle : "본인/휴대폰인증",
    // 팝업의 넓이를 지정한다. 기본은 500px
    width: 750,
    
    // 팝업의 움직일지 여부를 지정한다.
    popupMove: true,
    // 팝업 뒤쪽 배경 클릭 가능 여부를 지정한다.
    popupBackground : false,
    // 팝업에 중간에 들어갈 html
    popupHtml : html
        });

    cnttNoInfoPopup.openPopup(html);
    
}



function zipCodePopUp(obj) {

    
    $.ajax({
       type:'POST',
       url:'/mbr/zipCodePopUp.do' ,
       data:'',
       dataType:'html',
       cache:false,
       error:function(){
          alert("화면을 가져오지 못하였습니다."); 
       },
       success:function ( html, status ){
           
           $('#zipCodePopUp').html(html);
           insertZipCodePopUp(obj);
       }
    });

}

function insertZipCodePopUp(id){

    var html = document.getElementById("zipCodePopUp").innerHTML;
    document.getElementById("zipCodePopUp").innerHTML = "";
            
    var zipCodePopUp;
    zipCodePopUp = new jQuery.Popup({
    // 여러개 띠울때 사용한다. id값 변경으로 여러개의 popup을 띠울수 있다. 기본은 popup
    popupId : id,
    //팝업에 들어갈 title을 지정한다.
    popupTitle : "본인/휴대폰인증",
    // 팝업의 넓이를 지정한다. 기본은 500px
    width: 750,
    
    // 팝업의 움직일지 여부를 지정한다.
    popupMove: true,
    // 팝업 뒤쪽 배경 클릭 가능 여부를 지정한다.
    popupBackground : false,
    // 팝업에 중간에 들어갈 html
    popupHtml : html
        });

    zipCodePopUp.openPopup(html);
    
}













function AddInfoComplete(){
    var frm = $("#mbrAddInfoForm")[0];
  //  var mbrSn= document.getElementById("mbrSn");
 // alert(mbrSn.value);
//  alert(frm.mbrSn.value);


    var zipSn1 = document.getElementById("zipSn01");
    frm.zipSn1.value = zipSn1.value;
    
    var zipSn2 = document.getElementById("zipSn02");
    frm.zipSn2.value = zipSn2.value;
    
    var adr = document.getElementById("adr0");
    frm.adr.value = adr.value;
    
    var dtlAdr = document.getElementById("dtlAdr0");
    frm.dtlAdr.value = dtlAdr.value;
    
    var cnttNo = document.getElementById("cnttNo0");
    frm.cnttNo.value = cnttNo.value;
    
    var vinNo = document.getElementById("vinNo0");
    frm.vinNo.value = vinNo.value;
    /*
    frm.zipSn2.value = frm.zipSn02.value;
    frm.adr.value = frm.adr0.value;
    frm.dtlAdr.value = frm.dtlAdr0.value;
    frm.cnttNo.value = frm.cnttNo0.value;
    frm.vinNo.value = frm.vinNo0.value;
    */
     frm.action="<c:url value='/mbr/updateMbrAddInfo.do'/>";
    
    frm.submit();
}


</script>


</head>

<form id="mbrAddInfoForm" name="mbrAddInfoForm" method="post">
<body>

<input type="hidden" name="zipScn" id="zipScn" value="">
<input type="hidden" name="zipSn1" id="zipSn1" value="">
<input type="hidden" name="zipSn2" id="zipSn2" value="">
<input type="hidden" name="adr"    id="adr" value="">
<input type="hidden" name="dtlAdr" id="dtlAdr" value="">
<input type="hidden" name="cnttNo" id="cnttNo" value="">
<input type="hidden" name="vinNo"   id="vinNo"  value="">

<input type="hidden" name="mbrSn" id="mbrSn" value="${mbrInfoVO.mbrSn}">

<%@ include file="/WEB-INF/jsp/com/include/mbr/loginMbr.jspf"%>
 
<%@ include file="/WEB-INF/jsp/com/include/navi_utill_sub.jspf" %>
<%@ include file="/WEB-INF/jsp/com/include/navi_header.jspf" %>

<div id="wrap" class="non-subnavigation02">

    <hr />

    <%@ include file="/WEB-INF/jsp/com/include/sub_header_global02.jspf" %>
    <hr />

    <div id="container02_04">
        <div id="subtitle-area"><div class="subtitle-area-inner">
            <%@ include file="/WEB-INF/jsp/com/include/location.jspf" %>
        </div></div>
        <div id="article">
            <p><img src="/kr/images/global_menu/img_join_process04.gif" alt="회원가입 완료" /></p>
            <p class="subsection"><img src="/kr/images/global_menu/img_global_menu02_04_01.gif" alt="현대자동차 홈페이지 회원가입이 완료 되었습니다. 현대자동차의 다양한 서비스를 편리하게 이용 하실 수 있습니다." /></p>
            <div class="complete-email">
                <img src="/kr/images/global_menu/txt_global_menu02_04_01.gif" alt="회원님의 현대자동차 홈페이지 이메일아이디는" />
                <em>${mbrInfoVO.mbrEml}</em>
                <img src="/kr/images/global_menu/txt_global_menu02_04_02.gif" alt="입니다." />
            </div>
            <h5 class="subsection"><img src="/kr/images/title/h5_global_menu02_04_01.gif" alt="이용편의정보" /></h5>
            <p><img src="/kr/images/global_menu/txt_global_menu02_04_03.gif" alt="미리 입력하여 주시면 현대자동차 홈페이지를 편리하게 이용하실 수 있습니다." /></p>
            <div class="convenience-service-info subsection02">
                <div class="cell">
                    <h6><img src="/kr/images/title/h6_global_menu02_04_01.gif" alt="기본 주소" /></h6>
                    <p class="desc"><img src="/kr/images/global_menu/txt_global_menu02_04_04.gif" alt="카탈로그 신청, 시승, 이벤트, 구매상담 이용 시 활용됩니다." /></p>
                    <div class="boardwrite-wrap02">
                        <table summary="우편번호, 주소, 상세주소">
                        <caption>기본 주소 입력</caption>
                        <colgroup>
                            <col width="20%" />
                            <col />
                        </colgroup>
                        <tbody>
                        <tr>
                            <th scope="row"><img src="/kr/images/global_menu/txt_global_menu02_04_07.gif" alt="우편번호 주소 상세주소" /></th>
                            <td>
                                <input type="text" class="txt" style="width:52px;"  id="zipSn01"  name="zipSn01" />
                                -
                                <input type="text" class="txt" style="width:52px;" id="zipSn02" name="zipSn02" />
                                <a href="javascript:zipCodePopUp('zipCode');"><img src="/kr/images/common/button/btn_zipcode.gif" alt="우편번호" /></a>
                                <p class="sect">
                                    <input type="text" class="txt" style="width:310px;"  id="adr0" name="adr0"/>
                                </p>
                                <p class="sect">
                                    <input type="text" class="txt" style="width:310px;" id="dtlAdr0" name="dtlAdr0" />
                                </p>
                            </td>
                        </tr>
                        </tbody>
                        </table>
                    </div>
                </div>
                <div class="cell">
                    <h6><img src="/kr/images/title/h6_global_menu02_04_02.gif" alt="차량 정보" /></h6>
                    <p class="desc"><img src="/kr/images/global_menu/txt_global_menu02_04_05.gif" alt="상담 및 이벤트 응모 시 편리하게 이용하실 수 있습니다." /></p>
                    <div class="boardwrite-wrap02">
                        <table summary="계약번호 or 차대번호">
                        <caption>차량 정보 작성</caption>
                        <colgroup>
                            <col width="20%" />
                            <col />
                        </colgroup>
                        <tbody>
                        <tr>
                            <th scope="row"><img src="/kr/images/global_menu/txt_global_menu02_04_08.gif" alt="계약번호 or 차대번호" /></th>
                            <td>
                                <p class="sect02">
                                    <input type="text" class="txt" style="width:270px;" name="vinNo" id="vinNo"/>
                                    <a href="javascript:cnttNoInfoPopUp('cnttNoInfo');"><img src="/kr/images/common/button/btn_guide.gif" alt="차대번호안내" /></a>
                                </p>
                                <p class="sect02">
                                    <input type="text" class="txt" style="width:270px;" name="cnttNo" id="cnttNo"/>
                                    <a href="javascript:vinNoInfoPopUp('vinNoInfo');"><img src="/kr/images/common/button/btn_guide.gif" alt="등록번호안내" /></a>
                                </p>
                            </td>
                        </tr>
                        </tbody>
                        </table>
                    </div>
                    <p class="agree-check">* 안내 페이지를 참조하시어 차량 계약번호, 또는 차대번호를 넣어주세요.</p>
                </div>
            </div>
            <div class="sns-service-setting subsection02">
                <h5><img src="/kr/images/title/h5_global_menu02_04_02.gif" alt="SNS 서비스" /></h5>
                <p><img src="/kr/images/global_menu/txt_global_menu02_04_06.gif" alt="미리 입력하여 주시면 현대자동차 홈페이지를 편리하게 이용하실 수 있습니다." /></p>
                <div class="sns-area">
                    <div class="facebook null-sns">
                        <!-- tooltip -->
                        <div class="null-msg"><div class="null-msg-inner">
                            SNS 연동하여<br />친구들에게 알려보세요aaa!
                            <img src="/kr/images/event/img_tooltip_arrow.gif" alt="툴팁 이미지" class="arrow" />
                        </div></div>
                        <!-- //tooltip -->
                    </div>
                    <div class="twitter null-sns">
                        <!-- tooltip -->
                        <div class="null-msg"><div class="null-msg-inner">
                            SNS 연동하여<br />친구들에게 알려보세요aaaaaaaaaaaaa!
                            <img src="/kr/images/event/img_tooltip_arrow.gif" alt="툴팁 이미지" class="arrow" />
                        </div></div>
                        <!-- //tooltip -->
                    </div>
                    <div class="me2day null-sns">
                        <!-- tooltip -->
                        <div class="null-msg"><div class="null-msg-inner">
                            SNS 연동하여<br />친구들에게 알려보세요aaaaaaaaaaaaa!
                            <img src="/kr/images/event/img_tooltip_arrow.gif" alt="툴팁 이미지" class="arrow" />
                        </div></div>
                        <!-- //tooltip -->
                    </div>
                </div>
            </div>
            <div class="btnwrap">
                <a href="javascript:AddInfoComplete();"><img src="/kr/images/common/button/btn_join_complete.gif" alt="회원가입 완료" /></a>
            </div>
        </div>
    </div>
    <hr />
    <div id="vinNoInfoPopUp"  style="display:none"></div>
    <div id="cnttNoInfoPopUp"  style="display:none"></div>
    <div id="postInfoPopUp"  style="display:none"></div>
    <div id="zipCodePopUp"   style="display:none"></div>

    <%@ include file="/WEB-INF/jsp/com/include/footer.jspf" %>
    </form>